<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>People</h1>
		<ul>
			<li>
				<a href="files/jeremy.xml">JEREMY</a>
			</li>
			<li>
				<a href="files/andy.xml">! ! !</a>
			</li>
			<li>
				<a href="files/richard.xml">! ! !</a>
			</li>
			
		</ul>
		<div id="details"></div>
		
		<script>
			"use strict"
			
			window.onload = function(){
				let aNodes = document.getElementsByTagName("a")
				for(let i = 0; i < aNodes.length; i++){
					aNodes[i].onclick = function(){
						let request = new XMLHttpRequest()
						let method = "GET"
						let url = this.href
						
						request.open(method, url)
						request.send(null)
						
						request.onreadystatechange = function(){
							if(request.readyState == 4){
								if(request.status == 200 || request.status == 304){
									let oDiv = document.getElementById("details")
									// 1. 结果为XML格式, 所以需要使用responseXML来获取
									let result = request.responseXML
									
									// 2. 结果不能直接使用, 必须先创建对应的节点, 再把节点加入到#details
									let name = result.getElementsByTagName("name")[0].firstChild.nodeValue
									let website = result.getElementsByTagName("website")[0].firstChild.nodeValue
									let email = result.getElementsByTagName("email")[0].firstChild.nodeValue
									
									let text = "<h1>"
													+ "账号: " + name + " <br />"
													+ "邮箱: " + email + " <br />"
													+ "主页: " + "<a href='" + website + "'>www.xchch.top</a>"
												+ "</h1>"
									oDiv.innerHTML = text
								}
							}
						}
						return false
					}
				}
			}
		</script>
	</body>
</html>
